<template>
	<view>
		<view @click="onChooseAvatar" class="headerImage">
			<view class="" style="display: flex;align-items: center;">
				<image class="avatar-wrapper" :src="userInfo.Icon?userInfo.Icon:userUrl" mode="aspectFit"></image>
				<view class="" style="margin-left: 30rpx;position: relative;">
					<view class="" style="font-size: 24px;margin: 25px auto;">{{userInfo.Name}}</view>
					<view class="">{{userInfo.Phone}}</view>
				</view>
			</view>
			<uni-icons type="arrowright" color="rgb(187, 187, 187)"></uni-icons>
		</view>

		<view style="padding: 20rpx 35rpx; margin-top: 50rpx;display: flex;">
			<view class="" style="flex: 5;margin-right: 30rpx;">
				<view class="" style="display: flex;align-items: center;margin-bottom: 10rpx;">
					<uni-icons type="circle" size="20" color="#D1100B"></uni-icons>
					<text style="padding-left: 10rpx;">项目数量</text>
				</view>
				<u-line-progress :percentage="projectProgress" height="16"
					:active-color="progress>=90?'#d1100b':'#d1100b'"></u-line-progress>
				<text style="letter-spacing: 2rpx;font-size: 14px;margin-left: 10rpx;color: gray">
					{{ProjectNums +'个' +'/' + '10个' }}</text>
			</view>
			<view class="" style="flex: 5;">
				<view style="display: flex;align-items: center;margin-bottom: 10rpx;">
					<uni-icons type="circle" size="20" color="#D1100B"></uni-icons>
					<text style="padding-left: 10rpx;"> 云存储空间</text>
				</view>

				<u-line-progress :percentage="progress" height="16"
					:active-color="progress>=90?'#d1100b':'#d1100b'"></u-line-progress>
				<text style="letter-spacing: 2rpx;font-size: 14px;margin-left: 10rpx;color: gray">
					{{(sizeToMb)}}GB/{{StorageByte}} GB
				</text>
			</view>
		</view>
		<view class="">
			<view @click="toNotice" class="listItem">
				<text>通知</text>
				<view style="display: flex;align-items: center;height: 22px;">
					<uni-badge :text="UnreadTotal" size="small" :offset="[-10,-10]" />
					<u-icon name="arrow-right" color="#CCCCCC"></u-icon>
				</view>
			</view>
			<view @click="toMail" class="listItem">
				<text>通讯录</text>
				<u-icon name="arrow-right" color="#CCCCCC"></u-icon>
			</view>
			<view @click="feedback" class="listItem">
				<text>反馈中心</text>
				<u-icon name="arrow-right" color="#CCCCCC"></u-icon>
			</view>
			<view @click="xunjiango" class="listItem">
				<text>关于巡检GO</text>
				<u-icon name="arrow-right" color="#CCCCCC"></u-icon>
			</view>
		</view>
		<view style="position: fixed;bottom: 60rpx;width: 100%;">
			<button type="warn" @click="logOut">退 出 登 录</button>
			<view class="" style="text-align: center;margin-top: 50rpx;">
				版本号： v{{nowVersion}}
			</view>
		</view>


	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import cellGroup from '../../uni_modules/uview-ui/libs/config/props/cellGroup'
	export default {
		data() {
			return {
				ProjectNums: 0, //项目数量
				StorageByte: 0, // 最大容量
				// 当前版本号
				nowVersion: "v1.5.3",
				rules: {},
				formData: {},
				userInfo: {},
				userUrl: ''
			}
		},
		onShow() {
			console.log(111222333456)
			this.userInfo = uni.getStorageSync('userInfo')
			this.$http('Base_Manage/Home/GetAppOperatorInfo').then(res => {
				if (res.Success) uni.setStorageSync('userInfo', res.Data)
				this.userInfo = uni.getStorageSync('userInfo')
				let newSizeToMb = (this.userInfo.StorageByte - this.userInfo.ResidueMemory)
				this.StorageByte = (res.Data.StorageByte).toFixed(1) //总容量
				this.ProjectNums = this.userInfo.ProjectNums //项目数量
				console.log('获取用户信息----', this.userInfo, newSizeToMb)
			})

			uni.getSystemInfo({
				success: (res) => {
					this.nowVersion = res.appVersion;
					console.log(res)
				}
			});
			// // #ifdef APP-PLUS
			// // APP 获取本地应用资源版本号
			// plus.runtime.getProperty(plus.runtime.appid, (info) => {
			// 	console.log(info)
			// 	this.nowVersion = 'v' + info.version;
			// })
			// // #endif
		},
		computed: {
			sizeToMb() {
				let num
				if (this.userInfo.StorageByte && this.userInfo.ResidueMemory) {
					num = (parseFloat((this.userInfo.StorageByte - this.userInfo.ResidueMemory))).toFixed(1)
				} else {
					num = 0
				}

				return num
			},
			// 项目进度  项目总数量在暂时只按照10 个算  
			projectProgress() {
				let ProjectNums = (this.userInfo.ProjectNums / 10) * 100
				console.log('获取项目数量', ProjectNums)
				return ProjectNums
			},

			// 空间进度
			progress() {
				let StorageByte = this.userInfo.StorageByte //总数
				let residueProgress = (this.userInfo.StorageByte - this.userInfo.ResidueMemory).toFixed(
					1) //总容量- 剩余容量  = 已用容量
				let resultProgress = (residueProgress / StorageByte) * 100 //已用除以总数 *100  换算百分比
				return resultProgress
			},
			...mapState(['UnreadTotal'])
		},
		methods: {
			feedback() {
				uni.navigateTo({
					url: '/pages/feedback/feedback'
				})
			},
			toCPage(e) {
				uni.navigateTo({
					url: '/pages/user/customerPage?Type=' + e
				})
			},
			// 注销
			cancellation() {
				uni.navigateTo({
					url: '/pages/user/cancellation'
				})
			},
			toNotice() {
				uni.navigateTo({
					url: '/pages/notice/notice'
				})
			},
			toChangePhone() {
				uni.navigateTo({
					url: '/pages/user/changePhone?phone=' + this.userInfo.Phone
				})
			},
			toMail() {
				uni.navigateTo({
					url: '/pages/Mail/Mail'
				})
			},
			// 关于巡检GO
			xunjiango() {
				uni.navigateTo({
					url: '/pages/user/userGuan'
				})
			},
			// 修改个人信息
			toEditUserInfo(type) {
				console.log(type);
				let url = ''
				if (type == '姓名') url = `type=text&value=${this.userInfo.Name||''}&key=Name&title=姓名`
				else if (type == '手机号') url = `type=number&value=${this.userInfo.Phone||''}&key=Phone&title=手机号`
				else if (type == '地址') url = `type=text&value=${this.userInfo.Address||''}&key=Address&title=地址`
				else if (type == '邮箱') url = `type=text&value=${this.userInfo.Email||''}&key=Email&title=邮箱`
				uni.navigateTo({
					url: '/pages/user/editUserInfo?' + url
				})
			},
			logOut() {
				uni.removeStorageSync('loginStates'); //清除登录状态
				uni.removeStorageSync('userName'); //清除用户名
				uni.removeStorageSync('password'); //清除登录密码
				uni.removeStorageSync('customerInfoSelect');
				uni.removeStorageSync('entityProjectXmRwIdObj'); //清除存储的上传报告相关参数对象
				uni.removeStorageSync('NOTEAPPUPDATE'); //清空暂不升级参数
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			// 用户头像
			onChooseAvatar(e) {
				uni.navigateTo({
					url: '/pages/user/userDetail'
				})
				return
				uni.chooseImage({
					count: 1,
					success: (rst) => {
						console.log('获取即将要裁剪的图片结果', rst)
						uni.navigateTo({
							url: '/pages/user/camera?path=' + encodeURIComponent(rst
								.tempFilePaths[0])
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	// ::v-deep.uni-list-item {
	// 	border: 2px solid #ccc;
	// 	margin: 20rpx 20rpx 0 20rpx;
	// 	border-radius: 10rpx;
	// }
	.listItem {
		border: 1px solid #ccc;
		display: flex;
		justify-content: space-between;
		margin: 30rpx;
		padding: 25rpx;
		border-radius: 10rpx;
	}

	/deep/.uni-list-item__extra-text {
		max-width: 250px;
	}

	/deep/.uni-badge {
		min-width: 24px;
		height: 24px;
		line-height: 2;
	}

	.headerImage {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 8px;

		&:active {
			background-color: #f1f1f1;
		}
	}

	.avatar-wrapper {
		margin: 10px 0 0 10px;
		border: 1px solid #ccc;
		padding: 10rpx;
		background-color: transparent;
		width: 100px;
		height: 100px;
		border-radius: 5px;

		image {
			width: 100%;
			height: 100%;
			border-radius: 30px
		}
	}
</style>